<template>
  <div class="app-container">
    <eHeader :query="query" :teachers="teachers"/>
    <!--列表-->
    <el-table v-loading="loading" :data="data" style="width: 100%">
      <el-table-column type="index" label="序号" width="55">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="className" label="班级名称" min-width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">{{ scope.row.className }}</el-button>
        </template>
      </el-table-column>
      <el-table-column :formatter="typeFormatter" prop="classType" label="班级类型" width="80"/>
      <el-table-column prop="courseName" label="课程名称" width="200"/>
      <el-table-column prop="teacherName" label="班级老师" min-width="80"/>
      <el-table-column label="人数 / 预招" width="100">
        <template slot-scope="scope">
          <div class="content-rowspan">
            <div class="cell">{{ scope.row.existing }} / {{ scope.row.capacity }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="已授 / 总课时" min-width="100">
        <template slot-scope="scope">
          <div class="content-rowspan">
            <div class="cell">{{ scope.row.costHour }} / {{ scope.row.classHour == -1 ? '不限' : scope.row.classHour }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="classProgress" label="课程进度" min-width="120">
        <template slot-scope="scope">
          <el-tooltip :content="(scope.row.costHour + '/' + scope.row.classHour)" class="item" effect="dark" placement="top">
            <el-progress v-if="scope.row.hasFixHour == 1" :percentage="+((scope.row.costHour) * 100 / scope.row.classHour).toFixed(1)"/>
            <el-progress v-else :percentage="0"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="开班日期" width="120" sortable>
        <template slot-scope="scope">
          <span>{{ formatDate(new Date(scope.row.beginTime)) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="classStatus" label="班级状态" min-width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.classStatus === 1" type="plain" effect="light">{{ scope.row.classStatusTxt }}</el-tag>
          <el-tag v-if="scope.row.classStatus === 2" type="success" effect="light">{{ scope.row.classStatusTxt }}</el-tag>
          <el-tag v-if="scope.row.classStatus === 3" type="danger" effect="light">{{ scope.row.classStatusTxt }}</el-tag>
          <el-tag v-if="scope.row.classStatus === 10" type="info" effect="light">{{ scope.row.classStatusTxt }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <el-button :disabled="(scope.row.classStatus === 1 || scope.row.classStatus === 10)" type="text" 
            @click.native.prevent="handleCallRoll(scope.$index, scope.row)">点名</el-button>
          <em class="block-col"/>
          <el-button :disabled="(scope.row.classStatus == 10)" type="text" @click.native.prevent="handleDelayClass(scope.$index, scope.row)">延班</el-button>
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button :disabled="(scope.row.classStatus == 10)" type="text" @click.native.prevent="handleEndClass(scope.$index, scope.row)">结班</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
    <!-- 点名组件 -->
    <call-roll ref="callRollDlg"/>
    <!--延班组件-->
    <delay-dialog ref="delayDlg" @classScheduleChanged="classScheduleChanged"/>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import eHeader from './module/header'
import delayDialog from './module/delay'
import callRoll from '@/components/CallRoll'
import { formatDate } from '@/utils/index'
import { getTeacherListOptions } from '@/api/teacher'
import { endClass } from '@/api/class'
export default {
  components: { eHeader, delayDialog, callRoll },
  mixins: [initData],
  data() {
    return {
      teachers: [],
      courses: [],
      classId: null,
      className: ''
    }
  },
  created() {
    this.getTeachers()
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    formatDate,
    checkPermission,
    typeFormatter: function(row, column) {
      return row.classType === 1 ? '一对一' : '小组课'
    },
    beforeInit() {
      this.url = 'class/list'
      const sort = 'sort,asc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const className = query.className
      const teacherId = query.teacherId
      const classStatus = query.classStatus
      const classType = query.classType
      if (className) { this.params['className'] = className }
      if (teacherId) { this.params['teacherId'] = teacherId }
      if (classStatus) { this.params['classStatus'] = classStatus }
      if (classType) { this.params['classType'] = classType }
      return true
    },
    getTeachers() {
      getTeacherListOptions().then(res => {
        this.teachers = res.data
      })
    },
    // 显示详情界面
    handleView: function(row) {
      this.$router.push({
        path: `/education/class/${row.classId}`
      })
    },
    handleCallRoll: function(index, row) {
      this.classId = row.classId
      const dlg = this.$refs.callRollDlg
      dlg.classId = this.classId
      dlg.visible = true
      dlg.getStudents()
    },
    // 延班
    handleDelayClass: function(index, row) {
      const dlg   = this.$refs.delayDlg
      dlg.classId = row.classId
      dlg.visible = true
    },
    classScheduleChanged: function() {

    },
    // 结课
    handleEndClass: function(index, row) {
      let hint = ''
      if (row.classHour !== row.costHour) {
        hint = '有未学完的课程，'
      }
      this.$confirm(hint + '确认当前选中的班级结班吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const para = {
          classId: this.classId
        }
        endClass(para).then(res => {
          this.listLoading = false;
          if(res.code == 0) {
            console.log('结班成功！')
          }
        }).finally(() => {
          this.listLoading = false
        })
      }).catch(err => {
        console.log('结课失败' + err.msg)
        this.listLoading = false
      })
    }
  }
}
</script>
